<template>
   <transition name="el-zoom-in-top">
            <div class="title-wrapper" v-show="ifTitleAndMenuShow">
                <div class="left">
                    <router-link class="icon-back icon" :underline="false" :to="{ path: '/Eshelf' }"></router-link>
                </div>
                <!-- <div class="right">
                    <div class="icon-wrapper">
                        <span class="icon-cart icon"></span>
                    </div>
                    <div class="icon-wrapper">
                        <span class="icon-person icon"></span>
                    </div>
                    <div class="icon-wrapper">
                        <span class="icon-more icon"></span>
                    </div>
                </div> -->
            </div>
     </transition>
</template>
<script>

export default {
    props:{
        ifTitleAndMenuShow :{
            type:Boolean,
            default:false
        }
    },
}
</script>

<style scoped lang='scss'>
@import '../assets/styles/global';
a {
  text-decoration: none;
}
 
.router-link-active {
  text-decoration: none;
}
.title-wrapper{
        position: absolute;
        display: flex;
        top: 0;
        left: 0;
        width: 100%;
        height:px2rem(48);
        z-index: 10;
        background: white;
        box-shadow: 0 px2rem(8) px2rem(8) rgba(0,0,0,.15);
        .left{
            flex:0 0 px2rem(40);
            @include center;
        }
        .right{
            flex: 1;
            display: flex;
            justify-content: flex-end;
            .icon-wrapper{
                flex: 0 0 px2rem(40);
                @include center;
                .icon-Cart{
                    font-size: px2rem(25);
                }
            }
        }
    }
</style>